<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>5. v-on指令</h2>
			<p>绑定元素的事件</p>
			<h3>对比js方式</h3>
			<button type="button" onclick="show1()">按钮1</button>
			<button type="button" id="btn2">按钮2</button>
			<h3>vue中绑定vue中定义的事件处理</h3>
			<button type="button" v-on:click="show3">按钮3</button>
			<p>简写方式</p>
			<button type="button" @click="show4">按钮4</button>
			
			<h2>6. 修饰符</h2>
			
			<h3>鼠标按键修饰符.right</h3>
			<h3>鼠标按键修饰符.middle</h3>
			<button type="button" @click.right="show5">按钮5</button>
			<button type="button" @click.middle="show5">按钮5</button>
			<h3>系统修饰符.ctrl</h3>
			<h3>系统修饰符.alt</h3>
			<h3>系统修饰符.shift</h3>
			<button type="button" @click.ctrl="show6">按钮6</button>
			<button type="button" @click.alt="show7">按钮7</button>
			<button type="button" @click.shift="show8">按钮8</button>
			<h3>事件修饰符.capture 捕获模式</h3>
			
			<p>默认冒泡模式  b->a </p>
			<div @click="fooa" style="background-color: lightblue;padding: 5px;">
				a
				<div @click="foob" style="background-color: lightcoral;padding: 5px;">
					b
				</div>
			</div>
			<hr />
			<p>捕获模式 外面的先会触发处理 再往里传递</p>
			<div @click.capture="fooa" style="background-color: lightblue;padding: 5px;">
				a
				<div @click="foob" style="background-color: lightcoral;padding: 5px;">
					b
				</div>
			</div>
			
			
			<h3>事件修饰符.stop 阻止冒泡</h3>
			<div @click="fooa" style="background-color: lightblue;padding: 5px;">
				a
				<div @click.stop="foob" style="background-color: lightcoral;padding: 5px;">
					b
				</div>
			</div>
			
			<h3>事件修饰符.self 只处理本身</h3>
			
			<div @click.self="fooa" style="background-color: lightblue;padding: 5px;">
				a
				<div @click="foob" style="background-color: lightcoral;padding: 5px;">
					b
				</div>
			</div>
			
			<h3>事件修饰符.prevent 阻止默认处理</h3>
			<a href="https://www.baidu.com" @click.prevent>百度</a>
			<h3>事件修饰符.once 只生效一次</h3>
			<a href="https://www.baidu.com" @click.prevent.once>百度</a>
		</div>

		<script>
			
			function show1()
			{
				alert("show1");
			}
			
		
			// 页面全部加载完成后执行
			window.onload = function()
			{
				// js给元素添加事件方式2
				// 通过id找到DOM元素
				var btn2 = document.getElementById("btn2");
				console.log("按钮2:"+btn2);
				btn2.onclick = function()
				{
					console.log("show2");
					alert("show2");
				}
			}
			
			
		</script>
		
		<script>
			const vm = Vue.createApp({
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三",
						msg2: "<span style='color:red;'>Hello Vue!</span>",
						link: "https://www.baidu.com",
						logo: "images/logo.png",
					}
				},
				methods:{
					show3(){
						alert("show3"+this.msg);
					},
					show4(){
						alert("show4"+this.msg);
					},
					show5(){
						alert("show5"+this.msg);
					},
					show6(){
						alert("show6");
					}
					,
					show7(){
						alert("show7");
					}
					,
					show8(){
						alert("show8");
					},
					fooa(){
						alert("aaa");
					},
					foob(){
						alert("bbb");
					}
					
				}
			})
			vm.mount("#app");
			
			
			
		</script>
	</body>
</html>
